<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<header>
<div id="navLogo"><a href=""><img src="https://img.favpng.com/9/25/22/logo-graphic-design-interior-design-services-art-png-favpng-S9Kunp9En6GnvGwjHeQhq27LM.jpg" /></a></div>
<svg class="hamburger" viewBox="0 0 80 80">
<line class="line01" x1="0" y1="3" x2="80" y2="3" />
<line class="line02" x1="0" y1="40" x2="80" y2="40" />
<line class="line03" x1="0" y1="77" x2="80" y2="77" />
</svg>
</header>
<div class="menu">
<nav class="navigation">
<ul>
<li><a class="" href="">Portfolio</a></li>
<li><a class="" href="">About</a></li>
<li><a class="" href="">Blog</a></li>
</ul>
</nav>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script>
var $hamburger = $('.hamburger');
TweenLite.set('.line01',{x:40});
TweenLite.set('.line03',{x:-40});
TweenLite.set('.navigation',{xPercent:-50, yPercent:-50})
TweenLite.set('.navigation li',{x:-110});
var hamburgerMotion = new TimelineMax()
.to('.line03',0.4,{x:'-=40'},0)
.to('.line01',0.4,{x:'+=40'},0)
.to('.menu',0.4,{autoAlpha:1},0)
